<template>
	<view>
		        <view class="context">
		            <view class="top">
		                <ul>
		                    <li>日</li>
		                    <li>一</li>
		                    <li>二</li>
		                    <li>三</li>
		                    <li>四</li>
		                    <li>五</li>
		                    <li>六</li>
		                </ul>
		            </view>
		            <view class="yearM">
		                {{year}}年{{month+1}}月
		            </view>
		            <view class="center">
		                <ul>
							<!-- 这个月前面空出几天 -->
		                    <li v-for="(item,index) in fDay" :key="index"></li>
		                    <li v-for="(item,index) in mDays" :key="index" style="position: relative;">{{index+1}}
								<view style="position: absolute; bottom: 0rpx;">
									<text>
										<block  v-for="(itemm,indexx) in ymarr" :key = indexx>
											<text v-if="itemm == index" class="ym">已满</text>
										</block>
										<block  v-for="(itemm,indexx) in wkfarr" :key = indexx>
											<text v-if="itemm == index" class="wkf">未开放</text>
										</block>
									</text>
								</view>
							</li>
		                </ul>
		            </view>
					<view class="fgx">
						
					</view>
		        </view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// // 年
				// year:null,
				// // 月
				// month:null,
				// 第一天星期几
				fDay:null,
				// 对应月有几天
				mDays:null,
				// 已满的数组
				ymarr:[5,10,20,22],
				// 未开放数组
				wkfarr:[15,17],
				// 今天
				nowDay:new Date()
				
				
			}
		},
		methods: {
			// 获取当月的第一天
			dayStart(month, year) {
				var tmpDate = new Date(year, month, 1);
				this.fDay = (tmpDate.getDay());
			},
			// 计算某年是不是闰年
			daysMonth(month, year) {
				let month_olympic = [31,29,31,30,31,30,31,31,30,31,30,31];
				let month_normal = [31,28,31,30,31,30,31,31,30,31,30,31];
				let month_name = ["January","Febrary","March","April","May","June","July","Auguest","September","October","November","December"];
				let tmp = year % 4;
				if (tmp == 0) {
					this.mDays = (month_olympic[month]);
				} else {
					this.mDays =  (month_normal[month]);
				}
			},
			fn(){
				console.log(this.fDay,this.mDays)
			}
		},
		// 接受年月
		props:{
			year:{
				type:Number
			},
			month:{
				type:Number
			}
		},
		created() {
			// this.year = 2021;
			// this.month = 10;
			this.dayStart(this.month,this.year);
			this.daysMonth(this.month,this.year);
		},
		mounted() {
			this.fn();
		}
	}
</script>

<style scoped>

        li {
            list-style: none;
        }

        .context {
            width: 100%;
            height: 100%;
            padding-bottom: 5rpx;
        }

        .top {
            width: 100%;
            height: 70rpx;
            font-size: 24rpx;
        }

        .top ul {
            width: 100%;
            height: 70rpx;
            padding: 0;
            font-family: arial;
            font-weight: bold;
            color: #666666;
            background: rgb(249, 249, 249);
            display: flex;
            justify-content: space-around;
        }

        .top ul li {
            width: 13%;
            list-style-type: none;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .yearM{
            width: 100%;
            height: 64rpx;
            display: flex;
            justify-content: center;
            align-items: flex-end;
            font-size: 28rpx;
            font-weight: 700;
            line-height: 36rpx;
            background-color: #ffffff;
        }
/* 日期内容 */
        .center{
            width: 100%;
            margin: 0;
            padding: 0;
        }
        .center ul{
            width: 100%;
            padding: 0;
            margin: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        .center ul li{
            width: 14.28%;
            height: 102rpx;
            margin-top: 5rpx;
            display: flex;
			flex-direction: column;
            justify-content: center;
            align-items: center;
			font-size: 24rpx;
			font-weight: 700;
			color: #666666;
			line-height: 36rpx;
        }
		.ym{
			color: #fc5e22;
			line-height: 36rpx;
		}
		.wkf{
			color: #cccccc;
			line-height: 36rpx;
		}
		.fgx{
			width: 696rpx;
			height: 2rpx;
			border: 2rpx solid #f2f2f2;
			margin: 0 auto;
		}
</style>
